<template>
	<view>
		<view class="unibar">
			<uni-nav-bar shadow left-icon="left" right-icon="more" @clickLeft="back" @clickRight=""/>
		</view>
		<view class="groupmsgdetailimg">
			<!-- 这个头像应该是数据库拿到的 -->
			<image class="groupmsgdetailimg" :src="`${baseurl}/${pathselectimg}`" mode="widthFix" @click="changeimg"></image>
		</view>
		<view class="groupdetail">
			<view class="groupname">
				<view class="groupnamewhat">
					{{selfuserinfo.name==null? groupinfo.name : selfuserinfo.name}}
				</view>
				<view class="groupnametime">
					{{groupinfo.time}}
				</view>
			</view>
			<view class="groupnews">
				{{groupinfo.notice == null ? '这群主真懒!啥也没有~这群主真懒!啥也没有~这群主真懒!':groupinfo.notice}}
			</view>
			<view class="grouplist">
				<view class="grouplistleft">
					群成员
				</view>
				<view class="grouplistright" @tap="changedeletestatic">
					<view style="padding-right:15rpx;">
						管理
					</view>
					<image class="grouplistimg" src="../../static/tabBar/guanli.png" mode=""></image>
				</view>
			</view>
			<view class="">
				<uni-grid :column="5"   :show-border="false" :square="false">
					<uni-grid-item v-for="(item, index) in friendlist" :index="index" :key="index">
						<view class="grid-item-box">
							<image style="width: 80rpx;height: 80rpx;" :src="`${baseurl}/${item.imgUrl}`" mode="aspectFill"></image>
							
							<view class="nicknamefangwei">{{item.nickname}}</view>
							<view class="hindimgdelete" v-show="item.ischecked && item.nickname !='邀请'" @tap="tapdeletefriend(item)">
								<image class="hideimgsize" src="../../static/img/errordelet.png" mode=""></image>
							</view>
							
						</view>
						
					</uni-grid-item>
				</uni-grid>
			</view>
			<view class="my-content-list" v-for="(item,index) in listtop" :key="item.id" @tap="gopathlist(item.id)">
				<view class="my-content-item">
					<view class="content">
						<view class="text">
							<view class="title">
								{{item.title}}:
							</view>
							<view class="content">
								{{returnlisttop(item.id)}}
							</view>
						</view>
					</view>
					<view class="imgs">
						<image v-if="item.id != 3" class="img" src="../../static/tabBar/right.png" mode=""></image>
						<switch v-else :checked="selfuserinfo.shield==0? false:false" color="#6475ad" style="transform:scale(0.7)"  @change="switch1Change"/>
					</view>
				</view>
				<mylines></mylines>
				
			</view>
			<transition
			          appear
			          name="animate__animated animate__bounce"
			          leave-active-class = "animate__backOutDown"
					  enter-active-class = "animate__backInDown"
			      >
			<view v-if="isShow" class="reserva-detal" @touchmove.stop.prevent="">
				<!-- 阴影框 -->
				<view class="pop-mask" @tap="hidePop()">
				</view>
				        <view class="pop-box">
							<uni-nav-bar :title="titlewhat" />
				        	<view class="inptop">
								<uni-easyinput  trim="all" type="textarea" v-model="textcontent" placeholder="请输入内容"></uni-easyinput>
				        	</view>
				        	<view class="editpopbox">
				        		<button class="buttonclass" size="mini" @tap="funishedit">完成修改</button>
				        	</view>
				        	
				        </view>
			</view>
			</transition>
			<button>退出群聊</button>
		</view>
	</view>
</template>

<script>
	import mylines from '@/components/common/Lines.vue'
	import $http from '@/common/api/request.js'
	import {mapState} from 'vuex'
	import 'animate.css';
	import _ from 'lodash';
	export default {
		data() {
			return {
				baseurl:"https://zyc618.mynatapp.cc",
				isShow: false,
				
				groupinfo:{},//群的详细信息  群主有id号
				friendlist:[],
				titlewhat:"",//传递是什么东西需要被修改
				textcontent:"",//接收内容修改
				listtop: [{id: 0,title: "群名称",},
							{id: 1,title: "群公告",},
							{id: 2,title: "群备注",},
							{id: 3,title: "消息免打扰",}
				],
				selfuserinfo:{},//下面内容个人配置
				pathselectimg:"",
				
			}
		},
		methods: {
			//点击返回的回调函数:
			back(){
				this.navigateTo({
					url:"/pages/index/index"
				})
			},
			//获取群相关信息:
			getgroupdetail(groupidindex){
				$http.request({
					url:"/index/getgroup",
					method:"post",
					data:{
						groupid:groupidindex
					}
				}).then((res)=>{
					if(res.code==200){
						this.groupinfo = res.data;
						this.pathselectimg = res.data.imgurl;
						this.getuserlist(groupidindex);
					}
				}).catch((err)=>{
					console.log(err);
				})
			},
			//获取群成员:
			getuserlist(groupidindex){
				$http.request({
					url:"/index/getuserlist",
					method:"post",
					data:{
						userID:this.groupinfo.userID,//群主的id
						groupid:groupidindex,
						selfuserID:this.userInfo.id//自己的id
					}
				}).then((res)=>{
					if(res.code==200){
						this.friendlist = res.data.map(item=>{
							return{...item,
							ischecked:false}
						});
						this.selfuserinfo = res.selfuserinfo
					}
				}).catch(()=>{
					
				})
			},
			returnlisttop(index){
				if(index == 0){
					return this.groupinfo.name
				}else if(index == 1){
					return this.groupinfo.notice==null? '无':this.groupinfo.notice
				}else if(index == 2){
					//群备注
					return this.selfuserinfo.name
				}
			},
			//点击下面每个事项的回调:
			gopathlist(index){
				if(index == 0){
					if(this.userInfo.id == this.groupinfo.userID){
						//弹框	修改总群名
						this.titlewhat = this.listtop[index].title;
						this.textcontent = this.returnlisttop(index);
						this.isShow = true;
					}else{
						uni.showToast({
							title:"权限不够",
							mask:true,
							icon:"none",
							duration:1000
						})
					}
						
				}else if(index == 1){
					if(this.userInfo.id == this.groupinfo.userID){
						//弹框  修改群公告
						this.titlewhat = this.listtop[index].title;
						this.textcontent = this.returnlisttop(index)
						this.isShow = true
					}else{
						uni.showToast({
							title:"权限不够",
							mask:true,
							icon:"none",
							duration:1000
						})
					}
				}else if(index == 2){
					//群备注
					this.titlewhat = this.listtop[index].title;
					this.textcontent = this.returnlisttop(index)
					this.isShow = true
				}else{
					//群免打扰
				}
			},
			//管理好友
			changedeletestatic(){
				if(this.userInfo.id == this.groupinfo.userID){
					this.friendlist.forEach(item=>{
						item.ischecked =! item.ischecked ;
					})
				}else{
					uni.showToast({
						title:"权限不够",
						mask:true,
						icon:"none",
						duration:1000
					})
				}
			},
			//发起清除列表请求:
			tapdeletefriend(item){
				if(this.userInfo.id == this.groupinfo.userID){
					return
				}
			},
			//点击阴影区域:
			hidePop() {
				uni.showToast({
					title:"取消操作",
					icon:"none",
					mask:true
				})
				this.isShow = false
			},
			//点击修改完成按钮
			funishedit(){
				$http.request({
					url:"/index/updatagroup",
					method:"post",
					data:{
						groupid:this.groupinfo.groupid,
						textcontent:this.textcontent,
						titlewhat:this.titlewhat,
						userID:this.userInfo.id,
						groupuserID:this.groupinfo.userID
					}
				}).then((res)=>{
					
					if(res.code==200){
						this.getgroupdetail(this.groupinfo.groupid);
						this.isShow = false;
						
					}
				}).catch((err)=>{
					console.log(err);
				})
			},
			//更换群头像
			changeimg(){
				if(this.userInfo.id == this.groupinfo.userID){
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album',"camera"], 
						success: (res)=> {
							//上传服务器函数:
							this.showeditimg(res.tempFilePaths)
							this.submitimg(res.tempFilePaths[0])
						}
					});
				}else{
					uni.showToast({
						title:"权限不够",
						mask:true,
						icon:"none",
						duration:1000
					})
				}
				
			},
			//查看群图片:
			showeditimg(imgurl){
				uni.previewImage({
					urls:imgurl,
				});
			},
			//图片上传服务器:
			submitimg(pathfile){
				uni.uploadFile({
					url: this.baseurl+'/api/files/upload', //仅为示例，非真实的接口地址
					filePath:pathfile,
					name: 'file',
					formData: {
						url: "Group",
						pathname:this.userInfo.id + Date.now()
					},
					success: (uploadFileRes) => {
						let imgdatalist =JSON.parse(uploadFileRes.data);
						
						if(imgdatalist.data.code == 200){
							//获取后端处理图片地址信息,完成信息修改
							
							this.pathselectimg = imgdatalist.data.url;
							this.updataimg()
						}
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			// 更新群头像:
			updataimg(){
				$http.request({
					url:"/index/updatagroup",
					method:"post",
					data:{
						groupid:this.groupinfo.groupid,
						textcontent:this.pathselectimg,
						titlewhat:"群头像",
						userID:this.userInfo.id,
						groupuserID:this.groupinfo.userID
					}
				}).then((res)=>{
					
					if(res.code==200){
						uni.showToast({
							title:"群头像已经更新",
							icon:"none"
						})
					}
				}).catch((err)=>{
					console.log(err);
				})
			},
			//防抖节流开关
			switch1Change:_.debounce(function(e){
				$http.request({
					url:"/index/updatagroup",
					method:"post",
					data:{
						groupid:this.groupinfo.groupid,
						textcontent:`${e.detail.value?1:0}`,
						titlewhat:"消息免打扰",
						userID:this.userInfo.id,
						groupuserID:this.groupinfo.userID
					}
				}).then((res)=>{
					
					if(res.code==200){
						uni.showToast({
							title:e.detail.value?'开启消息免打扰':'已关闭消息免打扰',
							icon:"none"
						})
					}
				}).catch((err)=>{
					console.log(err);
				})
			}, 2000)
		},
		components:{
			mylines
		},
		onShow() {
			// this.getgroupdetail(this.groupinfo.groupid);
			// this.$forceUpdate()
		},
		onLoad(e) {
			//无论什么形式进来都需要groupid
			
			if(e.pathselectimg){
				this.pathselectimg = e.pathselectimg
			}
			if(e.groupid){
				this.$nextTick(()=>{
					console.log(e.groupid);
					this.getgroupdetail(e.groupid);
				})
			}
		},
		
		//计算属性:
		computed:{
		  ...mapState({
			  userInfo: state => state.user.userInfo
		  }),
		}
	}
</script>

<style lang="scss">
	.unibar{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}
.groupmsgdetailimg{
	width: 100%;
	position: fixed;
	top: 7%;
	left: 0;
	z-index: 0;
	.groupmsgdetailimg{
		width: 100%;
	}
}
.groupdetail{
	position: absolute;
	width: 95%;
	top: 70%;
	left:0;
	padding: 10rpx 20rpx;
	background-color: #fff;
	border-radius: 30rpx;
	.groupname{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;
		.groupnamewhat{
			font-size:38rpx;
			font-weight: 600;
		}
		.groupnametime{
			font-size: $uni-font-size-sm;
			color: $uni-color-paragraph;
		}
	}
	.groupnews{
		height: 100rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: $uni-font-size-base;
		color: $uni-color-paragraph;
	}
	.grouplist{
		display: flex;
		justify-content: space-between;
		align-self: center;
		padding: 10rpx 0;
		.grouplistleft{
			font-size: $uni-font-size-lg;
			font-weight: 600;
		}
		.grouplistright{
			display: flex;
			justify-content: space-around;
			align-self: center;
		}
	}
	.grouplistimg{
		width: 40rpx;
		height: 40rpx;
	}
}
.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
	.nicknamefangwei{
		color: $uni-text-color-grey;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	.hindimgdelete{
		position: absolute;
		top: -5rpx;	
		right: -10rpx;
		.hideimgsize{
			width: 90rpx;
			height: 90rpx;
		}
	}
.my-content-list {
	.my-content-item {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0;
		font-size: $uni-font-size-lg;
		.content {
			display: flex;
			.text {
				line-height: 56rpx;
				font-size: $uni-font-size-base;
				line-height: 40rpx;
				display: flex;
				align-items: center;
				.title{
					padding-right: 25rpx;
				}
				.content{
					color: $uni-text-color-grey;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
			}
		}
		.imgs {
			padding: 10rpx 0;
			display: flex;
			align-items: center;
			.img {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
}
.reserva-detal {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		.pop-mask {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 30%;
			background-color: rgba(0, 0, 0, .6);
		}
	
		.pop-box {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 70%;
			background-color: rgba(255, 255, 255, .98);
			.inptop {
				display: flex;
				font-size: $uni-font-size-lg;
				padding: 30rpx;
				
			}
			.editpopbox{
				width: 100%;
				display: flex;
				justify-content: center;
				padding: 20rpx 0;
				.buttonclass{
					background-color: #199b33;
					color: #fff;
				}
			}
		}
	}
</style>
